<template>
	<view style="height: 100%;">
		<view class="box">
			<view class="box-header  flex-align-center">
				<view class="flex-align-center" style="width:50%;margin:0 auto">
					<uni-data-select v-model="searchData.stage_id" placeholder="请选择学段" :localdata="stageList"
						@change="changeStage"></uni-data-select>
					<uni-data-select v-model="searchData.version_id" placeholder="请选择版本" :localdata="versionList"
						@change="changeVersion"></uni-data-select>
					<uni-data-select v-model="searchData.testbooks_id" placeholder="请选择上下册" :localdata="textBooksList"
						@change="changeTextBook"></uni-data-select>
				</view>
			</view>
			<view class="uni-list flex-center">
				<view class="content-son-left" v-if="unitList.length > 0">
					<view class="content-son-left-son">
						<view class="content-son-left-item flex-between" v-for="(item, index) in unitList" :key="index"
							:class="current === index ? 'active' : 'border-btm'" @click="tabChange(index)">
							<view class="title">
								{{ item.name }}
							</view>
							<view class="more">
								<span>({{ item.exam_num }}/{{ item.num }})</span>
							</view>
						</view>
					</view>
				</view>
				<view class="content-son-right">
					<view class="content-son-right-item flex-between" v-for="item in paperList" :key="item.id">
						<view class="left-title">
							{{ item.name }}
						</view>
						<view class="flex-align-center right-desc">
							<view class="num">
								<view class="num-item" v-if="item.total_exam_num > 0">
									总测：{{ item.total_exam_num }}
								</view>
								<view class="num-item" v-if="item.total_exam_num > 0">
									自测：{{ item.self_exam_num }}
								</view>
								<view class="num-item" v-else>
									未测
								</view>
							</view>
							<view class="rate" v-if="item.total_exam_num > 0">
								<view class="rate-item flex-align-center">
									<view>平均正确率: </view>
									<span>{{ item.average_pro }}</span>
								</view>
								<view class="rate-item flex-align-center">
									<view>最后一次正确率: </view>
									<span>{{ item.last_pro }}</span>
								</view>
							</view>
							<!-- 	<view class="not-test">
								未测
							</view> -->
							<view class="test-btn test-btn1 flex-center" @click="toStartTest(item.id)">
								开始测试
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
import { getStageApi, getVersionApi, getTextBooksApi, getUnitApi, getPaperApi } from '@/api/questionBank/index.js';
import {
	mapGetters
} from 'vuex'
export default {
	data() {
		return {
			searchData: {
				stage_id: "",
				version_id: "",
				testbooks_id: "",
				unit_id: ""
			},
			stageList: [],//学段
			versionList: [],//版本
			textBooksList: [],//上下册
			current: 0,
			unitList: [],
			paperList: [],
		}
	},
	watch: {

	},
	computed: {
		...mapGetters([
			'class_id'
		])
	},
	created() {
		this.getStage();
	},
	methods: {
		// 获取学段
		async getStage() {
			const { data: res } = await getStageApi({});
			// console.log(res.data, '获取学段');
			if (res.data && res.data.length > 0) {
				this.stageList = res.data.map((item) => ({
					value: item.id,
					text: item.name
				}))
				// console.log(this.stageList, 'this.stageList');
			} else {
				this.stageList = []
			}
		},
		// 获取版本
		async getVersion(stage_id) {
			const { data: res } = await getVersionApi({ stage_id, class_id: this.class_id });
			console.log(res.data, '获取版本');
			if (res.data && res.data.length > 0) {
				this.versionList = res.data.map((item) => ({
					value: item.id,
					text: item.name
				}))
				// console.log(this.stageList, 'this.stageList');
			} else {
				this.versionList = [];
				this.searchData.version_id = "";
			}
		},
		// 获取上下册
		async getTextBooks(version_id) {
			const { data: res } = await getTextBooksApi({
				version_id,
				class_id: this.class_id
			});
			console.log(res.data, '获取上下册');
			if (res.data && res.data.length > 0) {
				this.textBooksList = res.data.map((item) => ({
					value: item.id,
					text: item.name
				}))
				console.log(this.textBooksList, 'this.textBooksList');

			} else {
				this.textBooksList = [];
				this.searchData.testbooks_id = "";
			}
		},
		// 获取单元
		async getUnit() {
			const { data: res } = await getUnitApi({
				testbooks_id: this.searchData.testbooks_id,
				class_id: this.class_id
			});
			// console.log(res.data, '获取单元');
			this.unitList = res.data;
			this.getPaper();
		},
		// 获取试卷
		async getPaper() {
			const unit_id = this.unitList[this.current].id;
			console.log(unit_id, 'unit_id');
			const { data: res } = await getPaperApi({
				unit_id,
				class_id: this.class_id
			});
			console.log('获取试卷', res.data);
			this.paperList = res.data;

		},
		// 学段切换
		changeStage(e) {
			console.log(e);
			this.getVersion(e)
		},
		// 版本切换
		changeVersion(e) {
			console.log(e, '版本切换');
			this.getTextBooks(e);
		},
		// 上下册切换
		changeTextBook(e) {
			this.getUnit();
		},
		tabChange(val) {
			console.log(val);
			this.current = val;
			this.getPaper();
		},
		change(e) {
			console.log("e:", e);
		},
		// 开始考试
		toStartTest(id) {
			console.log(id);
			uni.navigateTo({
				url: '/pages/questionBank/components/startTest/startTest?id=' + id
			})
		}
	}
}
</script>

<style lang="scss" scoped>
@function px_2_vw($px) {
	@return #{$px * 100 / 1920}vw;
}

.box {
	background: #fff;
	border-radius: 65rpx;
	padding-bottom: 21rpx;
	margin: 0 54rpx 0rpx 54rpx;
	height: calc(100% - 0rpx);
	display: flex;
	flex-direction: column;

	.box-header {
		width: 100%;
		height: px_2_vw(132);
		background: radial-gradient(100% 100% at 50% 50%, #9CA1EF 3%, #DADDD8 33%, #EAC1FB 100%);
		border-radius: 65rpx 65rpx 0 0;
		padding: 0 39rpx;

		.datetime-box {
			width: px_2_vw(490);
			background: #fff;
			border-radius: 4px;
		}
	}
}

.uni-list {
	overflow-y: auto;
	height: calc(100vh - 400rpx);
	padding: 21rpx 24rpx;

	.content-son-left {
		width: px_2_vw(559);
		height: 100%;
		overflow-y: auto;
		background: radial-gradient(100% 100% at 50% 50%, #8070F2 0%, #5A42EC 100%);
		border-radius: 20rpx;
		padding: 22rpx 0 22rpx 0rpx;

		.content-son-left-son {}

		.content-son-left-item {
			width: 100%;
			// background: #fff;
			height: px_2_vw(90);
			font-weight: 700;
			font-size: px_2_vw(36);
			color: #fff;
			padding: 0 50rpx;
		}

		.title {
			width: px_2_vw(370);
			white-space: nowrap;
			/* 确保文本在一行内显示 */
			overflow: hidden;
			/* 超出容器部分的文本隐藏 */
			text-overflow: ellipsis;
		}
	}

	.content-son-right {
		// border:1px solid #A39F9F;
		// flex: 1;
		width: px_2_vw(1150);
		height: 100%;
		margin-left: 39rpx;
		padding: 22rpx 0;

		// display: flex;
		// flex-wrap: wrap;
		// align-items: center;
		// height: px_2_vw(600);
		.content-son-right-item {
			padding: 10rpx 56rpx 10rpx 22rpx;
			width: 100%;
			height: px_2_vw(95);
			background: radial-gradient(100% 100% at 50% 50%, #B8BCF8 3%, #C7C7FB 40%, #EAC1FB 100%);
			margin-bottom: 36rpx;

			.left-title {
				font-weight: bold;
				color: #000000;
				font-size: px_2_vw(36);
			}

			.right-desc {
				font-size: px_2_vw(28);

				.num-item {
					font-size: px_2_vw(25);
					color: #000000;
				}

				.rate {
					height: 100%;
					margin-left: 41rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.rate-item {
					color: #FF0000;
					font-size: px_2_vw(25);
					text-align: right;

					view {
						width: px_2_vw(210);
						padding-right: 10rpx;
					}
				}

				.test-btn {
					width: px_2_vw(187);
					height: px_2_vw(56);
					background: radial-gradient(100% 100% at 50% 50%, #FFA200 0%, #F6D46D 100%);
					border-radius: 27rpx;
					color: #651818;
					margin-left: 21rpx;
				}

				.test-btn1 {
					background: radial-gradient(100% 100% at 50% 50%, #534BEF 0%, #7506FF 100%);
					color: #fff;
				}

				.not-test {
					color: #666;
					font-size: px_2_vw(26);
				}
			}
		}

	}
}

.border-btm {
	border-bottom: 1rpx solid #A39F9F;
}

.more {
	color: #A3A3A3;
	font-size: px_2_vw(32);
	font-weight: 500;
}

.active {
	background: radial-gradient(100% 100% at 50% 50%, #EFA62D 0%, #D7C318 100%);
	background-size: 100% 100%;
	position: relative;
	color: #651818 !important;

	.more {
		color: #B36464 !important;
	}
}

.active::after {
	// content: '';
	// position: absolute;
	// right: -10rpx;
	// width: 50rpx;
	// height: 50rpx;
	// background: red;
}

::v-deep .uni-stat__select {
	margin: 0 10rpx;

}

::v-deep .uni-date-x uni-text {
	display: none;
}

::v-deep .uni-select__input-placeholder {
	font-size: 14px;
}
</style>